<template>
	<view class="allQuestion">
		<u-navbar :title="tit"></u-navbar>
		<view class="mid_show">
			<view class="progress">
				<span>
					<label class="active_count">{{curr_index+1}}</label>/<label
						class="total_count">{{totcount}}</label></span>
				<view class="pro">
					<u-line-progress active-color="#FFC0BE" :striped="true" :percent="percent" :striped-active="true"
						:show-percent="true">
					</u-line-progress>
				</view>
			</view>
			<view class="questionOne">
				<swiper style="height: 500rpx;" :interval="1000" :duration="500" :current="curr_index" :disable-touch="true">
					<swiper-item class="questionOne_s" v-for="(item,index1) in question" :key="index1">
						<view class="q">
							<view class="question_count">
								NO.{{curr_index+1}}
							</view>
							<view class="question_tit">
								{{item.tit}}
							</view>
						</view>
						<view class="question_option">
							<u-radio-group @change="radioGroupChange" wrap="true" active-color="#FFC0BE">
								<u-radio class="m" v-for="(an,index2) in item.answer" :key="index2" :name="an.name">
									<label>{{an.name}}</label>
								</u-radio>
							</u-radio-group>
						</view>
						<view class="question_fuc">
							<view class="back" v-if="curr_index>=1" @click="back">上一题</view>
							<view class="submit" v-if="((curr_index)+1)===totcount" @click="submit">提交</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tit: '心理调查问卷',
				curr_index: 0,
				totcount: 2,
				percent: 0,
				subflag:false,
				question: [{
						tit: "我觉得自己的将来没有什么可盼望的",
						answer: [{
								id: 0,
								name: "不符合",
							},
							{
								id: 1,
								name: "偶尔符合",
							},
							{
								id: 2,
								name: "比较符合",
							},
							{
								id: 3,
								name: "非常符合",
							},

						]
					},
					{
						tit: "我无缘无故地感到害怕",
						answer: [{
								id: 0,
								name: "不符合",
							},
							{
								id: 1,
								name: "偶尔符合",
							},
							{
								id: 2,
								name: "比较符合",
							},
							{
								id: 3,
								name: "非常符合",
							},

						]
					}
				],

			}
		},
		onLoad: (option) => {
			console.log(option.id)
		},
		methods: {
			radioGroupChange(e) {
				console.log(e);
				// 选择一个后进行翻页
				if (this.curr_index<= ((this.totcount)-1)) {
					this.percent = (((this.curr_index)+ 1) / this.totcount) * 100;
					this.curr_index++;
					if(this.curr_index= ((this.totcount)-1)){
						this.curr_index=((this.totcount)-1)
					}
				}
			},
			back(){
				if(this.curr_index>0){
					this.curr_index--;
				}else{
					this.curr_index=0;
				}
			},
			submit(){
				uni.request({
					
				})
			}
		}
	}
</script>

<style lang="less">
	.allQuestion {
		width: 750rpx;
		min-height: 100vh;
		background-color: white;

		.mid_show {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			.progress {
				width: 700rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: white;

				span {
					width: 80rpx;

					.active_count {
						font-size: 28rpx;
						color: #FFC0BE;
					}

					.total_count {
						font-size: 21rpx;
						color: gray;
					}
				}
				.pro {
					width: 600rpx;
				}
			}

			.questionOne {
				margin-top: 50rpx;
				width: 750rpx;
				.questionOne_s {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					.q {
						width: 750rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.question_count {
							font-size: 30rpx;
							color: #FFC0BE;
							margin-right: 20rpx;
						}

						.question_tit {
							font-size: 30rpx;
							color: black;
						}
					}

					.question_option {
						height: auto;
						margin-top: 33rpx;

						.m {
							display: flex;
							justify-content: center;
							align-items: center;
							height: 80rpx;
							label {
								margin-left: 20rpx;
								text-align: justify;
							}
						}
					}

					.question_fuc {
						width: 700rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.back{
							font-size: 28rpx;
							border: 1px #ffb6b9 solid;
							text-align: center;
							padding: 7rpx;
							border-radius: 10rpx;
							box-shadow: 1px 1px 1px 1px lightgray;
						}
						.submit{
							font-size: 28rpx;
							border: 1px #ffb6b9 solid;
							text-align: center;
							padding: 7rpx;
							border-radius: 10rpx;
							box-shadow: 1px 1px 1px 1px lightgray;
						}
					}
				}

			}
		}
	}
</style>
